import { CellType } from ".";
import { dom } from "../tool";

/**
 * 文本显示框  绘制表格的时候可以编辑文字  编辑模式和查看模式只能显示绘制表格编辑的文字，且不能修改
 * @param {*} attribute 属性
 * @param {*} mode @default 3 模式：1：绘制模式、2：编辑模式、3：查看模式 
 * @param {*} template 父级模板  目前只有表单模板和盒子模板
 */
function TextShow(this: CellType, attribute: any = {}, mode = 3, template?: any) {
    this.type = 1;
    this.parentContainer = template;
    attribute.type = 1;
    this.attrData = attribute;
    const { text = "" } = attribute;
    let value: any = attribute.value ?? text;
    const container = dom('div', {
        className: 'gkh-text-div',
        innerText: value
    });
    let content: any;
    let input: any;
    let height;
    let preHeight;
    const change = () => {
        preHeight = container.offsetHeight;
        if (mode == 1 && value !== input.value) {
            value = input.value;
            content.innerText = value;
            this.attrData.text = value;
            height = container.offsetHeight - preHeight;
            if (height && template && template.cellHeightChange) {
                template.cellHeightChange(container, height - preHeight);
            }
        }
    }
    if (mode == 1) {
        content = dom('div', {
            target: container,
            className: 'gkh-text-height-adujst'
        });
        input = dom('textarea', {
            target: container,
            innerText: value,
            listeners: {
                keyup: change,
                change
            }
        });
    }

    this.setDisabled = (arg) => { };
    this.setVisible = (arg) => { };
    this.setReadonly = (arg) => { };
    // this.getValue = ()=>undefined;
    // this.setValue = (arg)=>{};
    this.getAttrData = function () {
        return this.attrData;
    }
    this.render = () => {
        return container;
    };
    this.renderAfter = () => {
        change();
    }
}

export default TextShow as unknown as CellType;